import {connect} from 'dva';
import React, {PureComponent} from 'react';
import {DatePicker, Form,InputNumber, Input, Modal, Select} from 'antd';

const FormItem = Form.Item;
const {Option} = Select;


@connect(state => ({
    coupon_group: state.coupon_group,
}))
@Form.create()
export default class UserCouponGroupModal extends PureComponent {
    state = {
        money: '',
        type: 'service'
    }
    props = {
        onHandleAddSuccess: () => {
        },
        user_id: 0
    }

    handleCancel = () => {
        this.props.dispatch({
            type: 'coupon_group/changeVisible',
            payload: false,

        });
    }
    handleSubmit = (e) => {

        this.props.form.validateFields((err, values) => {
            if (!err) {


                values.end_at = values.end_at.format('YYYY-MM-DD HH:mm:ss');
                console.log(values);
                this.props.dispatch({
                    type: 'coupon_group/add',
                    payload: values,
                    callback: () => {
                        this.props.form.resetFields();
                        this.handleCancel();
                        this.props.onHandleAddSuccess()

                    },
                });
            }
        });
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const item = this.state.item;
        const {coupon_group: {confirmLoading, couponGroupAddModal}} = this.props;

        const formItemLayout = {
            labelCol: {
                span: 6,
            },
            wrapperCol: {
                span: 14,
            },
        };
        return (
            <Modal
                onOk={this.handleSubmit}
                confirmLoading={confirmLoading}
                onCancel={this.handleCancel}
                title="添加优惠券"
                visible={couponGroupAddModal}
            >
                <Form onSubmit={this.handleSubmit}>
                    <FormItem  {...formItemLayout} label="优惠券名称">
                        {getFieldDecorator('name', {
                            rules: [
                                {
                                    required: true,
                                    message: '优惠券名称',
                                },
                            ],
                        })(
                            <Input/>
                        )}
                    </FormItem>
                    <FormItem hasFeedback {...formItemLayout} label="金额">
                        {getFieldDecorator('money', {

                            rules: [{
                                required: true,
                                message: '请输入正确的金额',
                                pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                            }],
                        })(<Input/>)}
                    </FormItem>
                    <FormItem  {...formItemLayout} label="门槛">
                        {getFieldDecorator('need_price', {

                            rules: [{
                                required: true,
                                message: '请输入正确的金额',
                                pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                            }],
                        })(<Input/>)}
                    </FormItem>
                    <FormItem  {...formItemLayout} label="类型">
                        {getFieldDecorator('type', {
                            rules: [{
                                required: true,
                                message: '优惠券类型',
                            }],
                        })(<Select>
                            <Option value='good'>商品</Option>
                            <Option value='service'>服务</Option>
                        </Select>)}
                    </FormItem>
                    <FormItem  {...formItemLayout} label="总数量">
                        {getFieldDecorator('max', {
                            rules: [{
                                required: true,
                                message: '总数量',
                            }],
                        })(<InputNumber />)}
                    </FormItem>

                    <FormItem  {...formItemLayout} label="优惠过期时间">
                        {getFieldDecorator('end_at', {
                            rules: [
                                {
                                    type: 'object',
                                    required: true,
                                    message: '请输入优惠过期时间',
                                },
                            ],
                        })(
                            <DatePicker/>
                        )}
                    </FormItem>
                </Form>
            </Modal>
        );
    }
}



